<template>
	<view>
		<!-- 选项卡 -->
		<view class="d-flex bg-white a-center font-md text-muted border-top border-bottom border-light-secondary">
			<view class="flex-1 d-flex a-center j-center py-2"
			v-for="(item,index) in tabBars" :key="item.name"
			:class="tabIndex === index ? 'tabactive' : ''"
			@click="changeTab(index)">
				{{item.name}}
			</view>
		</view>
		<view class="row" v-if="dataList.length>0">
			<view  v-for="item in dataList" :key="item.id"  class="bg-white machiene-item rounded">
				<view class="title">
				  <view v-if="item.jqbzSettings">{{item.jqbzSettings.name}}</view>
				  <view class="font-sm" :class="item.isSign===1?'text-success':'text-danger'">{{item.isSign===1?'已签收':'待签收'}}</view>
				</view>
				<view class="des">
				  <view>
					<view class="des-item" v-if="item.shCustomerInfo">浆站：{{item.shCustomerInfo.name}}</view>
					<view class="des-item cl-635454" v-if="item.jqbzSettings">
					  <view v-if="item.jqbzSettings.code">部件编码：{{item.jqbzSettings.code}}</view>
					  <view v-if="item.jqbzSettings.typeName">机型:{{item.jqbzSettings.typeName}}</view>
					</view>
					<view class="des-item">
					  <view v-if="item.batch">批号：{{item.batch}}</view>
					  <view v-if="item.code">编号：{{item.code}}</view>
					</view>
					<view class="des-item text-warning"  v-if="item.isSign===1">库存：{{item.remain}}</view>
					<view class="des-item cl-635454">发货数量：{{item.nums}}</view>
					<view class="border-dashed-top position-relative py-2" v-if="item.isSign===1">
						<view class="cl-635454 d-flex j-sb" >
						  <view>签收人：{{item.signerName}}</view>
						  <view>签收数量：{{item.autNums}}</view> 
						</view>
						<view class="cl-635454" >签收时间：{{item.signTime}}</view>
						<view class="position-absolute iconfont icon-yiqianshou bottom-yiqianshou"></view>
					</view>
					
				  </view>
				</view>
				<view class="py-2 d-flex j-end border-dashed-top">
					<view class="border main-rounded-circle border-orange text-orange px-2" @click="optionHandle(item,'detail')" >查看详情</view>
					<view class="border main-rounded-circle border-orange text-orange px-2 ml-1" @click="optionHandle(item,'sign')" v-if="jzUser&&!item.isSign">签收</view>
				</view>
				<!-- 底部 -->
				<view class="text-light-muted border-dashed-top d-flex j-sb  pt-1">
				  <view class="font-sm">创建者：{{item.creatorName}}</view>
				  <view class="font-sm">创建时间：{{item.createTime}}</view>
				</view>
			</view>
		</view>
		<!-- 没有数据 -->
		
		<view class="d-flex a-center j-center text-light-muted font-sm py-3" v-if="dataList.length>0">
			{{loadtext}}
		</view>
		<no-thing v-else :msg="tabBars[tabIndex].msg"></no-thing>
	</view>
</template>

<script>
	import noThing from '@/components/common/no-thing.vue';
	import api from '@/common/api/api.js'
	export default {
		components:{
			noThing
		},
		props:{
			jyRepair:{
				type:Boolean,
				default:false
			},
			jzUser:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				dataList:[],
				tabIndex:0,
				more:0,
				loadtext:'没有更多了',
				tabBars:[
					{ 
						name:"全部",
						msg:"你还没有添加备件",
						state:null
					},
					{
						name:"待签收",
						msg:"你还没有已签收备件",
						state:0
					},
					{
						name:"已签收",
						msg:"你还没有已签收备件",
						state:1
					}
				],
				pagination:{
					currentPage:1,
					pageSize:6
				},
				keyword:""
			}
		},
		created() {
			this.init();
			/**注册搜索事件*/ 
			this.eventSearchBtn()
		},
		methods: {
			init(){
				this.dataList=[];
				this.pagination.currentPage=1;
				this.getList(false)
			},
			eventSearchBtn(){
				this.$on("searchMethod",(vlaue)=>{
					this.keyword = vlaue;
					this.init()
				})
			},
			getList(refresh = true, callback = false){
				let self = this;
				let postData={
					...self.pagination,
					keyword:self.keyword,
					isSign:self.tabBars[self.tabIndex].state
				}
				self.$H.post(api.partsList,postData).then(res=>{
					self.dataList = refresh? [...res.content.records]:[...self.dataList,...res.content.records];
					// 恢复加载状态
					self.loadtext = res.content.total > self.pagination.pageSize*self.pagination.currentPage ? '上拉加载更多' : '没有更多了';
				})
			},
			/**上拉刷新*/ 
			pullUpRefresh(){
				// 是否已经处于加载状态
				if (this.loadtext !== '上拉加载更多') return;
				// 改变加载状态
				this.loadtext = '加载中...'
				this.pagination.currentPage++
				// 请求数据
				this.getList(false)
			},
			// 获取备件列表
			changeTab(index){
				this.tabIndex = index;
				this.init()
			},
			optionHandle(item,type){
				let self = this;
				switch(type){
					case 'detail':
					uni.navigateTo({
						url:`/pages/partsDetail/partsDetail?id=${item.id}`
					})
					break;
					case 'sign':
					uni.showModal({
					    title: '提示',
					    content: '是否确认签收',
					    success: function (res) {
					        if (res.confirm) {
								self.$H.post(api.updateParts,{
									id: item.id,
									isSign:1
								}).then(res=>{
									uni.showToast({
									    title: '签收成功',
										 icon: 'success',
									    duration: 2000
									});
									self.init();
								})
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
					break
				}
			}
		}
	}
</script>

<style>

.machiene-item{
  width:670upx;
  margin:20upx auto;
  padding:20upx;
  overflow: hidden;
}
.machiene-item .title{
  font-size: 32rpx;
  line-height: 1.6;
  padding-bottom:24rpx;
  margin-bottom:24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ede9ea;
}
.machiene-item .des{
  font-size: 26rpx;
}
.machiene-item .des-item{
  display: flex;
  justify-content: space-between;
  margin-bottom:16rpx;
}
.machiene-item  .bottom-yiqianshou{
	font-size: 180upx;
	bottom: -180upx;
	left:-50upx;
	color:rgba(40,167,69,.5)
}
</style>
